<template>
  <div class="header">
    <a-dropdown>
      <a class="ant-dropdown-link">
        <a-icon type="global" />
      </a>
      <a-menu
        slot="overlay"
        @click="localeChange"
        :selectedKeys="[$route.query.locale || 'zh_CN']"
      >
        <a-menu-item key="zhCN"> 中文 </a-menu-item>
        <a-menu-item key="enGB"> English </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
export default {
  methods: {
    localeChange({ key }) {
      this.$router.push({ query: { locale: key } });
    },
  },
};
</script>

<style scoped lang="less">
.header {
  float: right;
  margin-right: 20px;
}
</style>
